import ReactHighcharts from 'react-highcharts'
export const chartConfig = {
  chart: {},
  title: {
    text: '公司部门人数分布图',
    x: -20 //center
  },
  credits: {
    enabled: false
  },
  subtitle: {
    text: '开发部门: 技术服务部',
    x: -20
  },
  xAxis: {
    categories: ['工程一部', '技术服务部', '工程二部', '移动部', '工程三部', '工程四部',
      '市场部', '业务拓展部', '工程五部', '行政部', '人事部', '总公司']
  },
  yAxis: {
    title: {
      text: null
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    valueSuffix: '人'
  },
  legend: {
    layout: 'vertical',
    align: 'center',
    verticalAlign: 'bottom',
    borderWidth: 0
  },
  series: [{
    name: '人数',
    data: [20, 25, 30, 80, 40, 100, 80, 29, 50, 46, 22, 78]
  }]
}
export const pieConfig = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: true,
    type: 'pie',
    animation: {
      duration: 1500,
      easing: 'easeOutBounce'
    }
  },
  title: {
    text: 'test'
  },
  credits: {
    enabled: false
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        useHTML: true,
        formatter: function () {
          return "<p style='width: 70px; display:inline-block; white-space:pre-wrap;font-size:11px;color:#606060'>" + this.point.name+ ": " +
            this.percentage.toFixed(2) + " %</p>";
        }
      }
      , events: {
        click: function (e) {
          var t = this.data[event.point.x].name;
          console.log(t);
        }
      }
    }
  },
  series: [{
    name: 'number',
    colorByPoint: true,
    data: [{
      name: 'scale1',
      y: 40
    }, {
      name: 'scale2',
      y: 10,
    }, {
      name: 'scale3',
      y: 30
    }, {
      name: 'scale4',
      y: 20
    }]
  }]
}
export const columnConfig = {
  chart: {
    type: 'column'
  },
  credits: {
    enabled: false
  },
  title: {
    text: '公司各部门人数图'
  },
  subtitle: {
    text: '开发部门:技术服务部'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: null
    }

  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y}人'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}人'
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
  }, {
    name: 'Jane',
    data: [2, -2, -3, 2, 1]
  }, {
    name: 'Joe',
    data: [3, 4, 4, -2, 5]
  }]
}